<template>
  <div class="app-order">
    <div class="hot-sale">
      <nut-infiniteloading
        @loadmore="onInfinite"
        :use-window="true"
        :is-show-mod="true"
        :has-more="isHasMore"
        :is-loading="isLoading"
        :threshold="80"
      >
        <ul class="order-list">
          <li class="list-item" v-for="(item, index) of dataList" :key="index">
            <div class="order" @click="goTO('/order/details')">
              <div class="order-name">订单编号：{{item.order}}</div>
              <div>
                <!-- <span class="order-state order-state-select">
                  <i class="iconfont makerwarn"></i>
                  {{item.orderState}}
                </span>-->

                <!-- <span class="order-state order-state-edit">
                  {{item.orderState}}
                  <i class="iconfont makerarrow-right"></i>
                </span>-->

                <span class="order-state order-state-name">{{item.orderState}}</span>
              </div>
            </div>
            <div class="order-details">
              <img :src="item.img" alt />
              <div>
                <div class="order-price">
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-price">
                    <span class="item-price-new">
                      <i class="iconfont makerqian"></i>
                      {{ item.price }}
                    </span>
                  </div>
                </div>
                <div class="item-content">{{ item.info }}</div>
              </div>
            </div>
            <div class="the-order-number">
              <span>快递单号：SF1123456843908632</span>
              <a @click="handleCopy">复制</a>
            </div>
            <div class="state-btn">
              <!-- <nut-button class="state-red" block shape="circle" >上传照片</nut-button> -->
              <!-- <nut-button class="state-red" block shape="circle" >立即定制</nut-button> -->
              <nut-button class="state-yellow" block shape="circle">去支付</nut-button>
            </div>
          </li>
        </ul>
      </nut-infiniteloading>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  data() {
    return {
      isLoading: false,
      isHasMore: true,
      dataList: [
        {
          order: 1042567887,
          orderState: '资源上传失败',
          img: require('../../assets/image/order1.jpg'),
          title: '艺林的相册6',
          info: '该相册还未付款哦，快去前往支付吧',
          price: '218.00',
          oldPrice: '280.00',
        },
        {
          order: 1042567887,
          orderState: '待付款',
          img: require('../../assets/image/order2.jpg'),
          title: '艺林的相册5',
          info: '该相册还未付款哦，快去前往支付吧',
          price: '261.00',
          oldPrice: '280.00',
        },
        {
          order: 102888888,
          orderState: '待发货',
          img: require('../../assets/image/order3.jpg'),
          title: '艺林的相册4',
          info: '订单生辰时间：2020/07/24 13:22:03',
          price: '281.00',
          oldPrice: '280.00',
        },
        {
          order: 102888888,
          orderState: '待发货',
          img: require('../../assets/image/order4.jpg'),
          title: '艺林的相册4',
          info: '订单生辰时间：2020/07/24 13：22：03',
          price: '281.00',
          oldPrice: '280.00',
        },
        {
          order: 102888888,
          orderState: '待发货',
          img: require('../../assets/image/order5.jpg'),
          title: '艺林的相册4',
          info: '订单生辰时间：2020/07/24 13：22：03',
          price: '281.00',
          oldPrice: '280.00',
        },
        {
          order: 102888888,
          orderState: '待发货',
          img: require('../../assets/image/order6.jpg'),
          title: '艺林的相册4',
          info: '订单生辰时间：2020/07/24 13：22：03',
          price: '281.00',
          oldPrice: '280.00',
        },
      ],
      timer: null,
      page: 1,
    };
  },
  methods: {
    onInfinite() {
      console.log('a');
      this.isLoading = true;
      this.timer = setTimeout(() => {
        console.log('this.page=', this.page);
        if (this.page <= 5) {
          this.dataList = this.dataList.concat(this.dataList);
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 1000);
    },
    goTO(path) {
      this.$router.push(path);
    },
    // 点击复制
    handleCopy() {
      console.log('fuzhi')
      document.execCommand('互相呼呼')
      this.copy('互相呼呼')
    },
    copy(data) {
      let url = data;
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput);
      oInput.select()
      document.execCommand('Copy')
      oInput.remove()
    }
  },
  destroyed() {
    clearTimeout(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.app-order {
  font-size: 13px;
  letter-spacing: 1px;
}
.order {
  display: flex;
  justify-content: space-between;
  padding: 0 3vw;
  .order-name {
    font-size: 12px;
    color: #b3b3b3;
  }
  .order-state {
    font-size: 14px;
    i {
      margin-right: 2px;
    }
  }
  .order-state-select {
    color: #ff4027;
  }
  .order-state-edit {
    color: #ff7e00;
    i {
      margin-right: 0px;
    }
  }
  .order-state-name {
    color: #1e1e1e;
  }
}
.list-item {
  margin: 10px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}
.order-price {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .item-title {
    font-size: 16px;
    color: #1e1e1e;
    // font-weight: bolder;
  }
  .item-price-new {
    color: #1e1e1e;
    font-weight: bolder;
    font-size: 16px;
  }
}
.item-content {
  font-size: 12px;
  color: #b3b3b3;
  margin-top: 2vh;
}
.order-details {
  display: flex;
  margin: 10px;
  img {
    width: 16vw;
    height: 16vw;
    border-radius: 5px;
    margin: 0px 10px 0px 0px;
  }
}
.state-btn {
  width: 100%;
  text-align: center;
  padding: 1vh 0;
  button {
    width: 40vw;
    margin: 0 auto;
    height: 4vh;
  }
  // .nut-button {
  //   background: #ff7e00;
  // }
  .state-red {
    background: #ff4027;
  }
  .state-yellow {
    background: #ff7e00;
  }
}
.the-order-number {
  width: 100%;
  height: 4vh;
  color: #b3b3b3;
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  & > a {
    display: inline-block;
    width: 60px;
    height: 3vh;
    margin-left: 20px;
    border-radius: 2vh;
    color: #1e1e1e;
    font-size: 14px;
    text-align: center;
    line-height: 3vh;
    border: 1px solid #cccccc;
  }
}
</style>
